<template>
  <div
    :class="['learun-container', { 'learun-collapse': lr_isCollapse }]"
    :style="{
      'padding-left': lr_isCollapse ? '' : `${lr_theme.sideWidth}px`,
      'padding-top': `${lr_theme.headerHeight}px`,
    }"
  >
    <my-header ref="header" />
    <!-- 侧边导航栏 -->
    <sidebar v-if="['side', 'mix', 'side2', 'side3'].includes(lr_theme.nav)" />
    <!-- 主体窗口 -->
    <div
      class="learun-main"
      :style="{ 'padding-top': lr_theme.showTabs ? '40px' : '0' }"
    >
      <!-- 顶部标签卡 -->
      <tags v-if="lr_theme.showTabs" />
      <!-- 主体视图层 -->
      <div class="learun-main__views">
        <div class="l-load-views">
          <div class="lr-home__main">
            <l-loading></l-loading>
          </div>
          <div class="lr-home__footer" style="position: absolute">
            <a :href="appConfig.url" target="_blank">{{ appConfig.company }}</a>
          </div>
        </div>

        <transition name="fade-transform" mode="out-in">
          <template>
            <keep-alive :include="keepAliveList">
              <router-view
                class="learun-view"
                v-if="
                  !$route.meta.isIframe &&
                  this.isRouterAlive &&
                  !tagLoading
                "
              />
            </keep-alive>
          </template>
        </transition>
        <transition name="fade-transform" mode="out-in">
          <l-page-iframe />
        </transition>
      </div>
    </div>

    <!--底部导航栏-->
    <my-footer />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MyHeader from "./header";
import tags from "./tags";
import sidebar from "./sidebar";
import MyFooter from "./footer";
export default {
  components: {
    MyHeader,
    tags,
    sidebar,
    MyFooter,
  },
  provide() {
    return {
      admin: this,
    };
  },
  data() {
    return {
      isRouterAlive: true,
      reloadUrl:''
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters(["tag", "tagLoading",'tagList','modules']),
    myModules() {
      if (this.loginInfo.f_SecurityLevel == 1) {
        return this.modules.filter((t) => t.f_EnabledMark == 1);
      }
      return this.modules.filter((item) => {
        if (item.f_EnabledMark == 1) {
          const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
          if (moduleAuthIds.indexOf(item.f_ModuleId) > -1) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
    },
    keepAliveList() {
      if(!this.appConfig.isTabKeepAlive || !this.lr_theme.showTabs){
        return []
      }

      return this.tagList
        .filter(
          (t) =>
            (this.myModules.findIndex(
              (t2) => t2.f_UrlAddress == t.value && t.label == t2.f_FullName
            ) != -1 ||
              t.meta.isNotMenu) && t.meta.keepAlive != false && !t.meta.isIframe && t.value != this.reloadUrl
        ).map(t=>`page${t.value.replace(/\//g,'-')}`);
    },
  },
  props: [],
  methods: {
    // 屏幕检测
    init() {
      this.$store.commit("app/SET_SCREEN", document.body.clientWidth);
      this.$store.commit("app/SET_SCREEN_HEIGHT", document.body.clientHeight);
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("app/SET_SCREEN", document.body.clientWidth);
          this.$store.commit(
            "app/SET_SCREEN_HEIGHT",
            document.body.clientHeight
          );
        }, 1);
      };
    },
    reload() {
      this.reloadUrl = this.$route.query.src || this.$route.path;
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.reloadUrl = "";
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="scss">
.l-load-views {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
</style>
